<template>
    <div class="divBox">
      <el-card class="box-card boxCard" shadow="hover" :body-style="{ paddingBottom: 0, borderBottom: 0 }">
        <el-form ref="formValidate" v-loading="fullscreenLoading" :rules="ruleValidate" :model="formValidate" size="small" class="formValidate mt20" label-width="120px" @submit.native.prevent>
          <!--添加活动【start】-->
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="账号：" prop="userName" v-if="routeId">
                <el-input v-model="formValidate.userName" :disabled="isDisabled" maxlength="249" placeholder="请输入账号" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="密码" prop="password" v-if="routeId">
              <el-input type="password" v-model="formValidate.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="确认密码：" prop="confirmPassword" v-if="routeId">
                <el-input type="password" v-model="formValidate.confirmPassword" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="真实姓名：" prop="realName">
                <el-input v-model="formValidate.realName" :disabled="isDisabled" maxlength="249" placeholder="请输入真实姓名" />
              </el-form-item>
            </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="手机号：" prop="mobile">
                <el-input v-model="formValidate.mobile" :disabled="isDisabled" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上传头像：" prop="headImage">
              <div class="upLoadPicBox cover-box" :disabled="isDisabled">
                <div @click="modalPicTap('1')" v-if="formValidate.headImage" class="coverImg"><img v-lazy="$uploadURL(formValidate.headImage)"></div>
                <div @click="modalPicTap('1')" v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div>
            </el-form-item>
          </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="昵称：" prop="nickName">
                <el-input v-model="formValidate.nickName" :disabled="isDisabled" maxlength="249" placeholder="请输入昵称" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="选择性别：" props="gender" class="specType">
              <el-radio-group v-model="formValidate.gender">
                <el-radio :label="0" class="radio">男</el-radio>
                <el-radio :label="1" >女</el-radio>
              </el-radio-group>
            </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址：" prop="address">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入地址"
                  v-model="formValidate.address">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="!routeId">
              <el-form-item prop="wechatOpenId">
                  <template v-slot:label
                    >微信openId：
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="微信openId"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <el-input
                    v-model="formValidate.wechatOpenId"
                    :rows="2"
                    type="textarea"
                    placeholder="微信openId"
                  ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="!routeId">
              <el-form-item prop="wechatUnionId">
                  <template v-slot:label
                    >微信unionId：
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="微信unionId"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <el-input
                    v-model="formValidate.wechatUnionId"
                    :rows="2"
                    type="textarea"
                    placeholder="微信unionId"
                  ></el-input>
                </el-form-item>
            </el-col>
          <el-col :span="24">
            <el-form-item label="帐号状态：" props="status" class="specType">
              <el-radio-group v-model="formValidate.status">
                <el-radio :label="0" class="radio">启用</el-radio>
                <el-radio :label="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          </el-row>
          <!--添加活动【end】-->
          <el-form-item>
            <el-button type="primary" class="submission subCurLeft" @click="handleSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
<script>
import { putUsersApi,postUsersApi,getUsersIdApi } from "@/api/users";
import { mapGetters } from "vuex";
import UploadVideo from "@/components/uploadVideo/index.vue";
import ueditorFrom from '@/components/ueditorFrom';
import draggable from 'vuedraggable';
export default {
  name: "usersAdd",
  components: {
    UploadVideo,
    ueditorFrom,
    draggable
  },
  data() {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formValidate.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validateUser = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (this.formValidate.userName=="") {
          callback(new Error('请先输入账号!'));
        } else {
          callback();
        }
      };
    return {
      imgSize: "60px",
      timeValue: [],
      routeId: "",
      // 双行
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      // 单行
      grid: {
        xl: 8,
        lg: 8,
        md: 8,
        sm: 12,
        xs: 24,
      },
      fileList: [],
      isDisabled: false,
      // 全屏加载
      fullscreenLoading: false,
      // 表单
      formValidate: {
        realName:"",
        mobile:"",
        nickName:"",
        address:"",
        wechatUnionId:"",
        wechatOpenId:"",
        headImage: '',
        status:0,
        gender:0,
        userName:"",
        password:"",
        confirmPassword:"",
      },
      // 表单验证
      ruleValidate: {
        realName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            required: true,
            min: 0,
            max: 100,
            message: "姓名最多为50个字符",
            trigger: "blur",
          },
        ],
        nickName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            required: true,
            min: 0,
            max: 100,
            message: "昵称最多为50个字符",
            trigger: "blur",
          },
        ],
        mobile:[
               { required: true, message: '请输入手机号码', trigger: 'blur' },
               { validator:function(rule,value,callback){
                            if(/^1[34578]\d{9}$/.test(value) == false){
                                   callback(new Error("请输入正确的手机号"));
                            }else{
                                   callback();
                            }
                          }, trigger: 'blur'
                },
        ],
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          {
            required: true,
            min: 0,
            max: 2000,
            message: "地址详情最多为100个字符",
            trigger: "blur",
          },
        ],
        wechatUnionId: [
          { required: true, message: '请输入微信unionId',trigger: 'change' }
        ],
        wechatOpenId: [
          { required: true, message: '请输入微信wechatOpenId',trigger: 'change' }
        ],
        status: [
          {
            required: true,
            message: "请选择账号状态",
            trigger: "blur",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        headImage: [
          { required: true, message: '请上传头像', trigger: 'change' }
        ],
        password: [
            { message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '密码长度为6 ~ 18个字符', trigger: 'blur' },
            { validator: validateUser, trigger: 'blur' }
          ],
        confirmPassword: [
            { validator: validatePass, trigger: 'blur' }
          ],
      },
    };
  },
  computed: {
    ...mapGetters(["customRouter","selectedId"]),
  },
  mounted() {
    this.routeId = this.$route.query.id;
    if (this.routeId) {
      getUsersIdApi(this.selectedId,this.routeId)
        .then((res) => {
          console.log("完整的 res 对象:", res);
          this.formValidate = res
          this.formValidate.gender = Number(res.gender)
          setTimeout(()=>{
            
            this.$set(this.formValidate, 'confirmPassword', true)
            this.formValidate.confirmPassword = res.password
          },800);
          console.log("提交res", this.formValidate);
          this.$message.success("信息获取成功!");
        })
        .catch(() => {
          
        });
    }
    console.log("this.routeId>>>>>>>",this.routeId);
  },
  methods: {
    editorInput(e) {
      this.$refs[`formValidate`].validateField('content');
    },
    modalPicTap(tit, i) {
      const _this = this
        this.$modalUpload((data) => {
          console.log("imag>>>>>>>>",data);
          if (tit === '1') {
            _this.formValidate.headImage = data[0].path
            console.log("_this.formValidate.headImage",_this.formValidate.headImage);
            this.$refs['formValidate'].validateField('headImage');
          }
        }, tit, '', '上传头像')
      
    },
    //提交
    handleSubmit() {
      const data = {
        RealName:this.formValidate.realName,//真实姓名
        Mobile:this.formValidate.mobile,//手机号
        NickName:this.formValidate.nickName,//昵称
        HeadImage:this.formValidate.headImage,//头像
        Gender:this.formValidate.gender,//性别 0男 1女
        Address:this.formValidate.address,//地址
        WechatUnionId:this.formValidate.wechatUnionId,//微信unionId
        WechatOpenId:this.formValidate.wechatOpenId,//微信openId
        Status:this.formValidate.status//账号状态
      }
      const data2 = {
        RealName:this.formValidate.realName,//真实姓名
        Mobile:this.formValidate.mobile,//手机号
        NickName:this.formValidate.nickName,//昵称
        HeadImage:this.formValidate.headImage,//头像
        Gender:this.formValidate.gender,//性别 0男 1女
        Address:this.formValidate.address,//地址
        UserName:this.formValidate.userName,//账户名
        Password:this.formValidate.password,//密码
        ConfirmPassword:this.formValidate.confirmPassword,//确认密码
        Status:this.formValidate.status//账号状态
        
      }
      console.log("data>>>", data);
      console.log("data>>>", data2);
      this.fullscreenLoading = true;
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          if(this.routeId != null){
            // 更新活动
            putUsersApi(this.selectedId,this.routeId,data2)
            .then((res) => {
              console.log("提交res", res);
              this.$message.success("更新成功!");
              this.fullscreenLoading = false;
              setTimeout(() => {
                this.$router.push({
                  path: `${this.customRouter}/users/users_list`,
                });
              }, 500);
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
          }else{
            data.userId = this.formValidate.userId
            // 添加活动
            postUsersApi(this.selectedId,data)
            .then((res) => {
              console.log("提交res", res);
              this.$message.success("新增成功!");
              this.fullscreenLoading = false;
              setTimeout(() => {
                this.$router.push({
                  path: `${this.customRouter}/users/users_list`,
                });
              }, 500);
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
          }
        } else {
          this.$message.error("请完善表单相关信息！");
          this.fullscreenLoading = false;
          return false;
        }
      });
    },
  },
};
</script>
  
<style lang="scss" scope>
.iframe {
  width: 344px;
  height: 644px;
  margin: 0 auto;
  border: 1px solid #eeeeee;
  border-radius: 40px;
  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
  }
  .content {
    height: 560px;
    overflow: hidden;
    overflow-x: hidden;
    padding: 0 20px;
    overflow-y: auto;
    img {
      max-width: 100%;
    }
  }
}
.choiceFormat {
  .el-select {
    .el-input {
      .el-input__inner {
        border-radius: 4px 0 0 4px !important;
      }
    }
  }
  .el-button[type="button"] {
    border-radius: 0 3px 3px 0 !important;
  }
}
.upLoadPicBox {
  .coverImg {
    width: 58px;
    height: 58px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &.cover-box {
    cursor: auto;
  }
}

.subCurLeft {
  margin-left: 0 !important;
}

.disLabelmoren {
  .el-form-item__label {
    width: auto !important;
    margin-left: 120px !important;
  }
}

.selWidth {
  width: 100%;
}
.selWidthd {
  width: 300px;
}
.specType {
  .el-form-item__content {
    line-height: 40px;
  }
}

.color-item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #ffffff;
  margin-right: 10px;
}
.color-list {
  .color-item.blue {
    background-color: #1e9fff;
  }
  .color-item.yellow {
    background-color: rgb(254, 185, 0);
  }
  .color-item.green {
    background-color: #009688;
  }
  .color-item.red {
    background-color: #ed4014;
  }
}

.detail {
  .el-form-item__content {
    line-height: normal;
  }
}
.el-table {
  .cell {
    padding: 0 10px;
    .box {
      padding: 0 10px;
    }
  }
}

.tabNumWidth {
  ::v-deep .el-input-number--medium {
    width: 121px !important;
  }
  ::v-deep .el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }
  ::v-deep .el-input-number__decrease {
    width: 20px !important;
    font-size: 12px !important;
  }
  ::v-deep .el-input-number--medium .el-input__inner {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  ::v-deep thead {
    line-height: normal !important;
  }
  ::v-deep .el-table .cell {
    line-height: normal !important;
  }
}

.acea-row {
  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
    .btndel {
      position: absolute;
      z-index: 1;
      left: 43px;
      top: -8px;
      font-size: 20px;
    }
  }
  .el-icon-circle-close {
    cursor: pointer;
  }
}

// 规格添加input框
.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: middle;
}

// 规格Tag样式
.type-tag {
  display: flex;
  align-items: center;
  .scopeType-tag-svg {
    cursor: move;
    svg {
      fill: red;
      font-size: 30px;
    }
  }
  .scopeType-tag {
    .rulesBox {
      display: flex;
      flex-wrap: wrap;
      align-items: self-start;
      .el-tag--light {
        cursor: move;
        padding-left: 30px;
        position: relative;
        &.el-tag--light::after {
          content: " ";
          display: block;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background-color: #2d8cf0;
          position: absolute;
          top: 8px;
          left: 10px;
        }
        .el-icon-close::before {
          margin-top: 1px;
          margin-right: 1px;
        }
      }
    }
    &.borderStyle {
      width: 90%;
      border: 1px solid #ccc;
      padding: 8px;
      border-radius: 4px;
    }
  }
}

// 处理input type = number的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.boxCard {
  .el-card__header {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}
</style>
  